<template>
  <view class="user-management-container">
    <!-- 顶部操作栏 -->
    <view class="action-bar">
      <!-- 组织架构筛选 -->
      <!-- <view class="org-filters"> -->
       <!-- <picker 
          class="org-picker" 
          mode="selector" 
          :range="deptList1" 
          range-key="dept_name"
          @change="onCompanyChangeOne"
        >
          <view class="picker-text">
            {{ selectedCompany ? selectedCompany.dept_name : '选择部门' }}
          </view>
        </picker> -->
        
       <!-- <picker 
          class="org-picker" 
          mode="selector" 
          :range="branches" 
          range-key="dept_name"
          :disabled="!selectedCompany"
          @change="onBranchChangeTwo"
        >
          <view class="picker-text" :class="{ disabled: !selectedCompany }">
            {{ selectedBranch ? selectedBranch.dept_name : '选择分公司' }}
          </view>
        </picker>
        
        <picker 
          class="org-picker" 
          mode="selector" 
          :range="departments" 
          range-key="dept_name"
          :disabled="!selectedBranch"
          @change="onDepartmentChange"
        >
          <view class="picker-text" :class="{ disabled: !selectedBranch }">
            {{ selectedDepartment ? selectedDepartment.dept_name : '选择部门' }}
          </view>
        </picker> -->
      <!-- </view> -->
      
      <!-- 搜索框 -->
      <view style="display: flex; justify-content: space-between; align-items: center;">
		  <view class="search-box" style="display: flex;align-items: center;">
		    <u-icon name="search" size="45" color="#999" class="search-icon"></u-icon>
		  		<input 
		      class="search-input" 
		      v-model="searchKeyword" 
		      placeholder="搜手机号/姓名"
		      @input="handleSearch"
		    />
		  </view>
		  
		  <button class="add-btn" style="margin-left: 15rpx;" @click="showAddDialog"> 新增用户</button>
	  </view>
    </view>

    <!-- 用户列表 -->
    <view class="user-list">
      <view 
        class="user-item" 
        v-for="user in paginatedUsers" 
        :key="user.user_id"
        :class="{ disabled: user.status === 0 }"
      >
        <view style="width: 100rpx;">
			<image class="avatar" :src="user.avatar || '/static/default-avatar.png'" />
		</view>
        
        <view class="user-info">
          <view class="name-row">
            <text class="username">用户名:{{ user.user_name }}</text>
            <text class="gender" :class="user.sex == '1'? 'male' :'female'">
              {{ user.sex === "1" ? '♂' : user.sex == "2" ? '♀' : '' }}
            </text>
            <text class="role-tag" v-if="user.user_type == '00'">管理员</text>
          </view>
          
          <view class="meta-row">
            <text class="phone">{{ user.phonenumber }}</text>
            <text class="department">{{ user.dept_name || ''}}</text>
          </view>
          <text style="font-size: 26rpx;color: #555;">登录账号:{{ user.login_name }}</text>
          <view class="meta-row">
            <text class="email">{{ user.email || '未设置邮箱' }}</text>
            <text class="status" :class="{ active: user.status == 0 }">
              {{ user.status == 0 ? '已激活' : '未激活' }}
            </text>
          </view>
        </view>
        
        <view class="user-actions">
          <switch 
            class="status-switch" 
            :checked="user.status == 0" 
            @change="handleStatusChange(user)" 
            color="#4cd964"
          />
		  <button class="action-btn edit" @click="handleEdit(user)">
			  <u-icon name="edit-pen" size="36" color="#409EFF"></u-icon>
		  </button>
		  <button  class="action-btn small delete-btn" @click.stop.prevent="showDeleteConfirm(user)">
					<uni-icons type="trash" size="16" color="#F56C6C"></uni-icons>
		  </button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="paginatedUsers.length === 0">
      <image src="/static/empty.png" mode="aspectFit" />
      <text>暂无用户数据</text>
    </view>

    <!-- 分页控件 -->
    <view class="pagination" v-if="paginatedUsers.length > 0">
      <button 
        class="page-btn" 
        :disabled="currentPage === 1" 
        @click="currentPage--,getUserList()"
      >
        上一页
      </button>
      <text class="page-info">第 {{ currentPage }} 页 / 共 {{ total }} 页</text>
      <button 
        class="page-btn" 
        :disabled="currentPage === total" 
        @click="currentPage++,getUserList()"
      >
        下一页
      </button>
    </view>

    <!-- 添加/编辑用户弹窗 -->
    <view class="modal-mask" v-if="showDialog" @click="showDialog = false">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text>{{ dialogTitle }}</text>
          <text class="close-btn" @click="showDialog = false">×</text>
        </view>
        <view class="modal-body">
          <scroll-view scroll-y class="form-scroll">
            <view class="form-item" style="display: flex;align-items: center;">
              <text class="form-label required">用户名</text>
              <input 
                class="form-input" 
                v-model="formData.user_name" 
                placeholder="请输入用户名"
              />
            </view>
            
            <view class="form-item" style="display: flex;align-items: center;">
              <text class="form-label required">手机号</text>
              <input 
                class="form-input" 
                v-model="formData.phonenumber" 
                placeholder="请输入手机号"
                type="number"
              />
            </view>
            <view class="form-item" style="display: flex;align-items: center;">
              <text class="form-label">登陆账号</text>
              <input 
                class="form-input" 
                v-model="formData.login_name" 
                placeholder="请输入密码"
              />
            </view>
            <view class="form-item" style="display: flex;align-items: center;">
              <text class="form-label">密码</text>
              <input 
                class="form-input" 
                v-model="formData.password" 
                placeholder="请输入密码"
                password
              />
            </view>
            
            <view class="form-item" style="display: flex;align-items: center;">
              <text class="form-label">邮箱</text>
              <input 
                class="form-input" 
                v-model="formData.email" 
                placeholder="请输入邮箱"
                type="email"
              />
            </view>
            <view class="form-item" style="display: flex;align-items: center;">
				<text style="width: 160rpx;" class="form-label required">城市</text>
				<picker
				  class="org-selector" 
				  mode="selector" 
				  :range="list" 
				  range-key="city_name"
				  @change="CityChage"
				>
				  <view class="selector-text">
				    {{ formData.city_name ? formData.city_name : '选择城市' }}
				  </view>
				</picker>
			</view>
            <view class="form-item" style="display: flex;align-items: center;">
              <text style="width: 160rpx;" class="form-label required">部门</text>
        
                <picker 
                  class="org-selector" 
                  mode="selector" 
                  :range="deptList1" 
                  range-key="dept_name"
                  @change="onFormDepartmentChange"
                >
                  <view class="selector-text" >
                    {{ formData.dept_name ? formData.dept_name : '选择部门' }}
                  </view>
                </picker>
            </view>
            <view class="form-item" style="display: flex;align-items: center;">
            	<text style="width: 160rpx;" class="form-label required">角色</text>
            	<picker
            	  class="org-selector" 
            	  mode="selector" 
            	  :range="filteredJobs" 
            	  range-key="post_name"
            	  @change="filteredJobsChange"
            	>
            	  <view class="selector-text">
            	    {{ formData.post_name ? formData.post_name : '选择角色' }}
            	  </view>
            	</picker>
            </view>
          
	
            <view class="form-item" style="display: flex;align-items: center;">
              <text class="form-label">激活状态</text>
              <switch 
                class="form-switch" 
                :checked="formData.status == 0?true:false" 
                @change="handleFormStatusChange"
              />
            </view>
            
           <view class="form-item" style="display: flex;align-items: center;">
              <text class="form-label">系统用户</text>
              <switch 
                class="form-switch" 
                :checked="formData.user_type == '00'?true:false" 
                @change="usertypeChange"
              />
            </view>
          </scroll-view>
		  <view class="modal-footer">
		    <button class="modal-btn cancel" @click="showDialog = false">取消</button>
		    <button class="modal-btn confirm" @click="handleDialogConfirm">确认</button>
		  </view>
        </view>
        
      </view>
    </view>
	
	<view v-if="showDeleteModal" class="delete-confirm-overlay">
	  <view class="delete-confirm-container">
	    
	    <view style="text-align: center; padding-bottom: 35rpx;" class="confirm-title">确认删除</view>
	    <text class="confirm-message">你确定要删除<span class="delete-dept-title">{{ deptToDelete.name }}</span>吗？此操作不可恢复。</text>
	    <view class="confirm-actions" style="margin-top: 35rpx;">
	      <button  style="justify-content: center;" class="action-btn cancel-btn" @click="showDeleteModal = false">取消</button>
	      <button   style="justify-content: center;"class="action-btn confirm-btn" @click="deleteDepartment">确认删除</button>
	    </view>
	  </view>
	</view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      // 组织架构数据
      // 用户数据
      allUsers: [],
	  companies:[],
	  branches:[],
      filteredUsers: [],
      paginatedUsers: [],
	  departments:[],
      // 角色数据
      // 分页
      currentPage: 1,
      pageSize: 10,
      // 搜索
      searchKeyword: '',
	  showDeleteModal:false,
      // 筛选条件
      selectedCompany: null,
      selectedBranch: null,
      selectedDepartment: null,
      // 弹窗控制
      showDialog: false,
      dialogTitle: '添加用户',
      isEditMode: false,
      // 表单数据
      formData: {
        user_name: '',
        phonenumber: '',
        password: '',
		login_name:'',
        email: '',
        sex: 0,
        status: 0,
		city_name:'',
		city_id:'',
		dept_id:'',
		dept_name:'',
		post_id:'',
		post_name:'',
		user_type:'01'
      },
	  total:0,
	  parent_id:'',
	  list:[],
	  filteredJobs:[],
	  deptList1:[],
    };
  },

  onLoad() {
  	this.getUserList()
	this.getDept(0)
	this.getCity()
	this.getPost()
  },
  watch:{
	  "formData.post_name"(o,n){
		  console.log('ooo',o,'nnn',n)
	  }
  },
  methods: {
	showDeleteConfirm(user) {
		this.formData = user
		this.showDeleteModal = true
	},
	async deleteDepartment(){
		const res = await this.$api.post('/User/delete',{user_id:this.formData.user_id},true)
		if(res.data.code === 200) {
			this.showDeleteModal = false
			uni.showToast({
				icon:'success',
				title:'删除成功'
			})
			this.getUserList()
		}
	},
	usertypeChange(e){
		console.log(e)
		this.formData.user_type  = e.detail.value ?'00':'01'
	},
	filteredJobsChange(e){
		let index = Number(e.detail.value)
		if(this.filteredJobs[index]){
			console.log(e,this.filteredJobs[index]?.post_name)
			this.formData.post_id = this.filteredJobs[index]?.post_id
			this.formData.post_name = this.filteredJobs[e.detail.value]?.post_name
		}
	},
	CityChage(e){
		let index = Number(e.detail.value)
		if(this.list[index]){
			this.formData.city_id = this.list[index]?.city_id
			this.formData.city_name = this.list[e.detail.value]?.city_name
		}
	},
	async getPost () {
		const res = await this.$api.get('/Post/index',{ page:1,limit:20},true)
		if(res.data.code === 200) {
			this.filteredJobs = res.data.data
			
		}
	},
	async getCity(){
		const params = {
			page:1,
			limit:20,
		}
		const res = await this.$api.get('/City/index',params,true)
		if(res.data.code === 200) {
			this.list = res.data.data
		}
		
	},
	async getDept(type){
		console.log('dasdadad',this.parent_id )
		const params = {
			package_id:Number(this.parent_id)
		}
		const res = await this.$api.post('/Dept/DeptIndex',params,true)
		if(res.data.code === 200) {
			let data = res.data.data
			console.log('dasdadadada',type)
			this.deptList1 = res.data.data
		}
		
	},
	async getUserList() {
		const params = {
			page:this.currentPage || 1,
			limit:this.pageSize || 20,
			phonenumber:this.searchKeyword,
			// dept_id:this.parent_id
		}
		const res = await this.$api.get('/user/index',params,true)
		if(res.data.code == 200) {
			this.paginatedUsers = res.data.data
			this.total = res.data.total
		}
	},

    
    // 过滤用户
    filterUsers() {
      let result = [...this.allUsers];
      
      // 组织架构筛选
      if (this.selectedCompany) {
        result = result.filter(user => user.companyId === this.selectedCompany.id);
        
        if (this.selectedBranch) {
          result = result.filter(user => user.branchId === this.selectedBranch.id);
          
          if (this.selectedDepartment) {
            result = result.filter(user => user.departmentId === this.selectedDepartment.id);
          }
        }
      }
      
      // 关键词搜索      
	  
	  
	  
      if (this.searchKeyword) {
        const keyword = this.searchKeyword;
       
      }
      
      this.filteredUsers = keyword;
    },
    
    // 分页处理
    paginateData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.paginatedUsers = this.paginatedUsers.slice(start, end);
	  this.getUserList()
    },
    
    // 搜索处理
    handleSearch() {
	  this.paginatedUsers = []
	  this.currentPage = 1
      this.getUserList();
    },
    

    onCompanyChangeOne(e){
		let index = e.detail.value
		this.selectedCompany = this.deptList1[index]
		this.parent_id = this.deptList1[index].dept_id
		console.log('--公司选择变化--',this.parent_id)
		this.getDept(1)
		this.getUserList()
		
	},
	// 公司选择变化
	onCompanyChange(e){
		let index = e.detail.values
		this.parent_id = this.companies[index].package_id
		console.log(e,'公司选择变化')
		this.departments[e.detail.value]
	},
    // 分公司选择变化
    onBranchChangeTwo(e) {
		let index = e.detail.value
		this.parent_id = this.companies[index].dept_id
		this.selectedBranch = this.branches[e.detail.value]
		this.getDept(1)
		this.getUserList()
    },
    
    // 部门选择变化
    onDepartmentChange(e) {
      this.selectedDepartment = this.departments[e.detail.value];
	  this.selectedBranch = this.branches[e.detail.value];
	  this.package_id = this.departments[e.detail.value].package_id
    },
    
    

    
    // 表单中的部门选择变化
    onFormDepartmentChange(e) {
	  
      this.formData.dept_id = this.deptList1[e.detail.value]?.dept_id;
	  this.formData.dept_name = this.deptList1[e.detail.value]?.dept_name;
    },
    // 显示添加弹窗
    showAddDialog() {
      this.dialogTitle = '添加用户';
      this.isEditMode = false;
      this.resetForm();
      this.showDialog = true;
    },
    
    // 编辑用户
    handleEdit(user) {
      this.dialogTitle = '编辑用户';
      this.isEditMode = true;
      console.log('编辑',user)
      this.formData = user
	  this.formData.password = ''
	  this.list.forEach(item => {
		  if(item.city_id == user.city_id){
			  this.formData.city_id = item.city_id
			  this.formData.city_name = item.city_name
		  }
		  
	  })
	  this.deptList1.forEach(item => {
		  if(item.dept_id == user.dept_id){
			  this.formData.dept_id = item.dept_id
		  	this.formData.dept_name = item.dept_name
		  }
	  })
	  this.filteredJobs.forEach(item => {
		  if(item.post_id == user.post_id){
			  this.formData.post_id = item.post_id
			  this.formData.post_name = item.post_name
		  }
	  })
      this.showDialog = true;
    },
    
    // 重置表单
    resetForm() {
      this.formData = {
        user_name: '',
		phonenumber: '',
		password: '',
		login_name:'',
		email: '',
		sex: 0,
		status: 0,
		city_name:'',
		city_id:'',
		dept_id:'',
		dept_name:'',
		post_id:'',
		post_name:'',
		user_type:'01'
      };
    },
    
    
    // 状态切换
    handleFormStatusChange(e) {
      this.formData.status = e.detail.value == 0 ? 1 : 0;
    },
    async setStatus(){
		delete this.formData.dept_name
		delete this.formData.post_name
		delete this.formData.city_name
		const res = await this.$api.post('/User/update',this.formData,true)
		if(res.data.code === 200) {
			this.getUserList()
		}
	},
    // 用户状态切换
    handleStatusChange(user) {
      user.status = user.status === 1 ? 0 : 1;
      const index = this.allUsers.findIndex(u => u.id === user.id);
      if (index !== -1) {
        this.allUsers[index].status = user.status;
      }
      uni.showToast({
        title: user.status === 1 ? '已激活用户' : '已禁用用户',
        icon: 'success'
      });
	  this.formData.user_id = user.user_id
	  this.setStatus()
    },
    
    // 弹窗确认
    async handleDialogConfirm() {
      // 表单验证
      if (!this.formData.user_name.trim()) {
        uni.showToast({ title: '请输入用户名', icon: 'none' });
        return;
      }
      
      if (!this.formData.phonenumber.trim()) {
        uni.showToast({ title: '请输入手机号', icon: 'none' });
        return;
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.formData.phonenumber)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
        return;
      }
      
      if (!this.isEditMode && !this.formData.password) {
        uni.showToast({ title: '请设置密码', icon: 'none' });
        return;
      }
      

      
      if (this.isEditMode) {
        // 更新用户
		delete this.formData.dept_name
		delete this.formData.post_name
		delete this.formData.city_name
        const res = await this.$api.post('/User/update',this.formData,true)
		if(res.data.code === 200) {
			this.getUserList()
		}
      } else {
        // 添加用户
		delete this.formData.dept_name
		delete this.formData.post_name
		delete this.formData.city_name
        const res = await this.$api.post('/User/save',this.formData,true)
		if(res.data.code === 200) {
			this.getUserList()
		}
        uni.showToast({ title: '用户添加成功', icon: 'success' });
      }
      
      this.showDialog = false;
    }
  }
};
</script>

<style lang="scss" scoped>
/* 主容器 */
.user-management-container {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 操作栏 */
.action-bar {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.org-filters {
  display: flex;
  gap: 15rpx;
  flex-wrap: wrap;
}

.org-picker {
  flex: 1;
  min-width: 200rpx;
  background: white;
  border-radius: 10rpx;
  padding: 15rpx 20rpx;
  font-size: 26rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.picker-text {
  color: #333;
  
  &.disabled {
    color: #999;
  }
}

.search-box {
  position: relative;
  flex: 1;
  background: white;
  border-radius: 50rpx;
  padding: 0 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.search-input {
  height: 80rpx;
  padding-left: 10rpx;
  font-size: 28rpx;
}

.search-icon {
  position: absolute;
  left: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.add-btn {
  background: #2979ff;
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 0 40rpx;
  height: 80rpx;
  font-size: 28rpx;
  box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
}

/* 用户列表 */
.user-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.user-item {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  
  &.disabled {
    opacity: 0.7;
  }
  
  &:active {
    transform: scale(0.98);
  }
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: #f0f2f5;
}

.user-info {
  flex: 1;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 15rpx;
  margin-bottom: 10rpx;
}

.username {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.gender {
  font-size: 24rpx;
  
  &.male {
    color: #2979ff;
  }
  
  &.female {
    color: #ff4d6a;
  }
}

.role-tag {
  font-size: 20rpx;
  background: #ffeedb;
  color: #ff7d00;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.phone, .email {
  flex: 1;
}

.department, .status {
  width: 200rpx;
  text-align: right;
}

.status {
  &.active {
    color: #4cd964;
  }
}

.user-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15rpx;
}

.status-switch {
  transform: scale(0.8);
}

.action-btn {
  padding: 0 20rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 24rpx;
  border-radius: 25rpx;
  border: none;
  
  &.edit {
    background: #f0f7ff;
    color: #2979ff;
  }
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
    opacity: 0.5;
  }
  
  text {
    color: #999;
    font-size: 28rpx;
  }
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
  gap: 30rpx;
}

.page-btn {
  background: #fff;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 30rpx;
  height: 60rpx;
  font-size: 26rpx;
  
  &:disabled {
    opacity: 0.5;
  }
}

.page-info {
  font-size: 26rpx;
  color: #666;
}

/* 弹窗 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  width: 90%;
  max-width: 690rpx;
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  animation: modal-show 0.3s;
  display: flex;
  flex-direction: column;
}

@keyframes modal-show {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header {
  padding: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
}

.modal-body {
  flex: 1;
  padding: 30rpx;
}

.form-scroll {
  height: 100%;
}

.form-item {
  margin-bottom: 15rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  // margin-bottom: 15rpx;
  width: 160rpx;
  color: #333;
  
  &.required::after {
    content: '*';
    color: #ff4d4f;
    margin-left: 5rpx;
  }
}

.form-input, .form-textarea {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
  background: #f9f9f9;
}

.form-textarea {
  height: 150rpx;
}

.form-tip {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.radio-group, .checkbox-group {
  // display: flex;
  // gap: 0rpx;
}

.radio-item, .checkbox-item {
  display: flex;
  align-items: center;
  font-size: 36rpx;
  
  radio, checkbox {
    transform: scale(0.8);
    margin-right: 10rpx;
  }
}

.org-selectors {
  display: flex;
  // flex-direction: column;
  // gap: 15rpx;
}

.org-selector {
  background: #f9f9f9;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 20rpx;
  width: 94%;
  margin-right: 15rpx;
  font-size: 28rpx;
}

.selector-text {
  color: #333;
  
  &.disabled {
    color: #999;
  }
}

.form-switch {
  transform: scale(0.8);
  transform-origin: left center;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #eee;
}

.modal-btn {
  flex: 1;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  border: none;
  border-radius: 45rpx;
  
  &.cancel {
    background: white;
    color: #666;
    border-right: 1rpx solid #eee;
  }
  
  &.confirm {
    background: #2979ff;
    color: white;
  }
}
</style>